<template>
	<view class="fine">
		<view class="fine_head flex-row-between">
			<view class="flex-row-start">
				<view v-for="(item,index) in navList" :key="index" class="nav-list font14" @click="Onnav(item)">
					<view :class="item.id===initData.url?'hig':''">{{item.title}}</view>
					<view class="is_hig" v-if="item.id ==navIndex"></view>
				</view>
			</view>
			<!-- 			<view class="head_rg flex-row-start">
				<biaofun-datetime-picker class="font14 font-1e1e1e" placeholder="筛选条件" :start="calendar.start"
					:end="calendar.end" fields="day" @change="onCalendar">
				</biaofun-datetime-picker>
				<uni-icons type="arrowright" size="12" color="#bababa"></uni-icons>
			</view> -->
		</view>
		<view style="height: 20rpx;background-color: #ffffff;width: 750rpx;"></view>
		<!-- 列表 -->
		<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="100" :initData="initData"
			@dataRefresh='dataRefresh'>
			<view v-for="(item,index) in dataList" :key="index" class="data_list">
				<view v-if="initData.url == 'scorescore'" class="flex-row-between">
					<view>
						<view class="font-1e1e1e font15" style="margin-bottom: 20rpx;">{{item.msg}}</view>
						<view class="font-c8c8c8 font11">{{item.createtime}}</view>
					</view>
					<view v-if="item.opt == 'add'" class="font-03004c font15">+{{item.score}}</view>
					<view v-else class="font-ff6428 font15">-{{item.score}}</view>
				</view>
				<view v-else class="flex-row-between">
					<view>
						<view class="font-1e1e1e font15" style="margin-bottom: 20rpx;">{{item.remark}}</view>
						<view class="font-c8c8c8 font11">{{item.pointGenDate}}</view>
					</view>
					<view class="font-03004c font15">{{item.point}}</view>
				</view>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/index.vue';
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: {
			biaofunDatetimePicker,
			LoadMore
		},
		data() {
			return {
				calendar: {
					start: '2021-06-01',
					end: this.$base.formatTime(new Date(), "yyyy-MM-dd")
				},
				// 传参数据
				initData: {
					url: 'scorescore',
					param: {
						name: '',
						date: ''
					}
				},
				navList: [{
						title: '系统积分',
						id: 'scorescore'
					},
					{
						title: '绿云积分',
						id: 'getCrsSocerList'
					}
				],
				navIndex: 1,
				dataList: []
			}
		},
		onLoad() {},
		methods: {
			onCalendar(date) {
				this.initData.param.date = date.id

			},
			Onnav(item) {
				this.initData.url = item.id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e) {
				this.dataList = e
			}
		}
	}
</script>

<style lang="less">
	.fine {
		.fine_head {
			width: 750rpx;
			height: 80rpx;
			background-color: #ffffff;
			padding: 0 25rpx;

			.nav-list {
				margin-right: 80rpx;
				color: #646464;
				position: relative;
				height: 80rpx;
				line-height: 80rpx;

				.hig {
					color: #03004c;
					font-weight: bold;
				}

				.is_hig {
					width: 100%;
					height: 5rpx;
					background-color: #03004c;
					border-radius: 3rpx;
					position: absolute;
					bottom: 16rpx;
				}
			}
		}

		.data_list {
			width: 700rpx;
			background-color: #ffffff;
			box-shadow: 0px 0px 30px 0px rgba(113, 113, 113, 0.1);
			border-radius: 10rpx;
			margin: 0 25rpx 20rpx 25rpx;
			padding: 20rpx;

			.data_bos {
				height: 120rpx;
				width: 630rpx;
				border-bottom: solid 1rpx #f5f5f5;
			}
		}
	}
</style>